<template>
	<view class="page user">
		<view class="user-title">绑定信息</view>
		<form class="user-form">
			<view class="user-form-title">公司信息</view>
			<view class="cu-form-group margin-top">
				<view class="title">公司名称</view>
				<input type="text" v-model="companyData.name" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">纳税人识别号</view>
				<input type="text" v-model="companyData.code" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">所属行业</view>
				<input type="text" v-model="companyData.industry" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">行业标签</view>
				<input type="text" v-model="companyData.industry_label" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">公司地址</view>
				<input type="text" v-model="companyData.house_address" disabled="true" />
			</view>
			<view class="user-form-title">个人资料</view>
			<view class="cu-form-group-top margin-top">
				<view class="title"><text class="required">*</text>姓名</view>
				<input placeholder="请输入姓名" v-model="formData.real_name" />
			</view>
			<view class="cu-form-group-top">
				<view class="title"><text class="required">*</text>手机号</view>
				<input placeholder="请输入手机号" v-model="formData.mobile" />
			</view>
			<view class="cu-form-group-top">
				<view class="title"><text class="required">*</text>身份证</view>
				<input placeholder="请输入身份证" v-model="formData.id_card" />
			</view>
			<view class="cu-form-group-top">
				<view class="title">现居地址</view>
				<QnSelect @change="handleCardAddress" :data="userData"></QnSelect>
			</view>
			<view class="cu-form-group-top">
				<view class="title">现居详细地址</view>
				<input placeholder="请输入详细地址" v-model="formData.live_address" />
			</view>
			<view class="padding">
				<QnCheckbox v-model="formData.face_option"><text class="padding">开启快速通道</text></QnCheckbox>
			</view>
			<view class="padding"><button class="cu-btn block bg-blue margin-tb-sm lg"
					@click="handleSubmit">提交认证信息</button></view>
		</form>
	</view>
</template>

<script>
	import {
		setUserInfo
	} from '@/api/user.js';
	import {
		getCompanyInfo
	} from '@/api/enterprise.js';
	import getUrlParams from '@/utils/getUrlParams.js';
	import QnCheckbox from '@/components/checkbox.vue';
	import QnSelect from '@/components/select/index.vue';
	export default {
		components: {
			QnCheckbox,
			QnSelect
		},
		data() {
			return {
				companyData: {},
				formData: {
					real_name: '',
					mobile: '',
					id_card: '',
					live_province: '',
					live_city: '',
					live_area: '',
					live_street: '',
					live_address: '',
					faceOption: false
				}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
			isLogin() {
				if (this.$store.state.token) {
					return true;
				} else {
					return false;
				}
			},
			userData() {
				return {
					pCode: this.formData.live_province,
					cCode: this.formData.live_city,
					aCode: this.formData.live_area,
					sCode: this.formData.live_street,
					pName: this.formData.live_province_name,
					cName: this.formData.live_city_name,
					aName: this.formData.live_area_name,
					sName: this.formData.live_street_name
				};
			}
		},
		onLoad(query) {
			if (this.isLogin) {
				if (query && query.q) {
					let data = getUrlParams(decodeURIComponent(query.q));
					if (data.company_id) {
						this.formData['company_id'] = data.company_id;
					}
					this.handleLoadCompany(data);
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			} else {
				this.$route('pages/login/login');
			}
		},
		onShow() {},
		methods: {
			handleLoadUserInfo() {
				setTimeout(() => {
					let arr = {
						...this.userInfo,
						...this.formData
					}
					console.log("数组合并", arr)
					this.formData = arr
					// this.formData = this.userInfo;
					console.log('this.formData', this.formData);
				}, 1000);
			},
			/**
			 * 获取公司信息
			 */
			handleLoadCompany(data) {
				getCompanyInfo(data).then(response => {
					const {
						data
					} = response;
					this.companyData = data;
					this.handleLoadUserInfo();
					console.log('response', response);
				});
			},
			handleCardAddress(res) {
				console.log('获取参数', res);
				this.formData.live_province = res.province;
				this.formData.live_city = res.city;
				this.formData.live_area = res.area;
				this.formData.live_street = res.street;
				this.formData.live_province_name = res.provinceName;
				this.formData.live_city_name = res.cityName;
				this.formData.live_area_name = res.areaName;
				this.formData.live_street_name = res.streetName;
			},
			handleSubmit() {
				setUserInfo(this.formData).then(response => {
					const {
						data
					} = response;
					console.log('response', response);
					uni.showToast({
						title: '认证成功',
						duration: 2000
					});
					uni.switchTab({
						url: '/pages/my/my'
					});
				}).catch(error => {
					console.log("错误", error)
					if (error.data) {
						uni.showToast({
							title: error.data.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '服务器繁忙',
							icon: 'error'
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.page.user {
		.required {
			color: red;
			padding-right: 10rpx;
		}

		.user-form {
			padding-bottom: 100rpx;
		}

		.user-title {
			font-size: 48rpx;
			font-weight: bold;
			padding-left: 30rpx;
		}

		.user-form-title {
			font-size: 38rpx;
			font-weight: bold;
			padding-left: 30rpx;
			line-height: 80rpx;
			padding-top: 28rpx;
		}
	}
</style>
